
<template v-infinite-scroll="load" style="overflow:auto">
  <div id="s_publishbox">
    <div class="navtit">
      <p class="page" @click="lightfollow(0)">热门</p>
      <p class="s_vertical"></p>
      <p class="page" @click="lightfollow(1)">最新</p>
      <p class="s_vertical"></p>
      <p class="page" @click="lightfollow(2)">热榜</p>
    </div>
    <!-- v-infinite-scroll="load" style="overflow:auto" -->
<<<<<<< HEAD
    <el-skeleton :rows="18" animated  style="margin-top: 25px" v-if="loading"/>
    <ul class="s_publishlist" v-else>

=======
<<<<<<< HEAD
    <el-skeleton :rows="18" animated  style="margin-top: 25px" v-if="loading"/>
    <ul class="s_publishlist" v-else>
=======
    <ul class="s_publishlist">
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      <li v-for="(item,i) in invitationlist" :key="i" @click="jumpdatalis({name:'post',params:{artId:item.article_id}})">
        <div class="word">
          <div class="s_userbox">
            <el-popover
                placement="top-start"
                trigger="hover">
              <div class="userinfo">
                <div class="headbox">
                  <div class="headpic">
                    <img src="@/assets/img/headicon.jpg" />
                  </div>
                  <div class="userpost">
                    <div class="userid">{{item.nick_name}}</div>
                    <p class="userword">{{ transDate(item.created_at) }}</p>
                  </div>
                </div>
                <div class="carebox">
                  <div class="carenum">
                    <p class="numcare">33</p>
                    <p>关注</p>
                  </div>
                  <div class="becarenum">
                    <p class="numcare">6666</p>
                    <p>关注者</p>
                  </div>
                  <el-button @click="getcare(item.article_id,judecare)">{{care}}</el-button>
                </div>
              </div>
              <p slot="reference">{{item.nick_name ||`用户${item.user_id}`}}</p>
            </el-popover>
            <p class="s_vertical"></p>
            <p class="s_sendtime">{{transDate(item.created_at)}}</p>
            <p class="s_vertical"></p>
            <p class="s_post">{{transTag(item.tags)}}</p>
          </div>
          <div class="wordpic">
            <div class="txt">
              <div class="s_pubtit">{{item.title}}</div>
              <div class="s_pubdetails" >{{ transInfo(item.info) }}</div>
              <div class="icon">
                <div class="icon_a">
                  <i class="el-icon-view"></i>
                  <p class="num">1</p>
                </div>
                <div class="icon_a">
                  <i class="el-icon-finished"></i>
                  <p class="num">2</p>
                </div>
                <div class="icon_a">
                  <i class="el-icon-chat-round"></i>
                  <p class="num">{{ item.comment_num }}</p>
                </div>
              </div>
            </div>
            <div class="picbox" v-if="item.pic">
              <img :src="item.pic" alt="">
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import {allUse} from "../../requests/apis";
export default {
  name: "homepage",
  data() {
    return {
<<<<<<< HEAD
      loading:true,

=======
<<<<<<< HEAD
      loading:true,
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      // 获取沸点数据列表
      invitationlist:[],
      // 热门等页面
      classifypage:[],
      // 显示条数
      sum:1,
      // 判断是否被关注
      judecare:false,
      // 关注字符
      care:'关注',
    }
  },
  methods:{
<<<<<<< HEAD
=======
<<<<<<< HEAD
    // 详情数据为html代码，在首页显示出html标签就不合理，这里用正则将标签替换掉，只留下文本
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    transInfo(info) {
      const re = /<(\S*?)[^>]*>.*?|<.*? \/>/g
      if(typeof  info == 'string'){
        return info.replace(re,'')
      }else if(typeof info =='object'){
        return JSON.stringify(info).replace(re,'')
      }else {
        return info.toString().replace(re,'')
      }
    },
<<<<<<< HEAD
=======
<<<<<<< HEAD
    // 将多个tag标签串联成一个字符串，中间用点分隔
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    transTag(tags) {
      let tags_name = []
      for(let i=0;i<tags.length;i++){
          tags_name.push(tags[i].tag_name)
      }
      return tags_name.join(' · ')
    },
<<<<<<< HEAD
=======
<<<<<<< HEAD
    // 封装的转换时间方法，在common中
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    transDate(date) {
      return this.$transDate(date)
    },
    // 获取沸点和添加列表
    getinvitation(){
      allUse('/api/articleList','post',{
        page:this.sum,
        size:10
      }).then((res)=>{
<<<<<<< HEAD
        this.loading = false
=======
<<<<<<< HEAD
        this.loading = false
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
        for(let i=0;i<res.data.data.data.length;i++){
          this.invitationlist.push(res.data.data.data[i])
        }

      }).catch((err)=>{
        console.log(err);
      })
    },
    // 关注与取消关注接口
    getcare(id,judecare){
      if(judecare == false){
        // 关注接口
        allUse('/api/concern','post',{
          token:this.$getSession().token,
          be_concern_user_id:id
        }).then((res)=>{
          this.judecare=true;
          this.care="已关注";
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        })
      }else if(judecare==true){
        // 取消关注接口
        allUse('/api/concernDel','post',{
              token:this.getSession().token,
              be_concern_user_id:id
        }).then((res)=>{
            this.judecare=false;
            this.care="关注";
            console.log(res);
          }).catch((err)=>{
            console.log(err);
          })
      }

    },
    // 高亮——初始化
    lightvar(){
      this.classifypage = document.querySelectorAll('.page');
      this.classifypage.forEach(el => {
        el.classList.remove('page');
      });
      this.classifypage[0].classList.add('page');
    },
    // 高亮——跟随
    lightfollow(id){
      if(id == 0){
        this.classifypage[id].classList.add('page');
        this.classifypage[1].classList.remove('page');
        this.classifypage[2].classList.remove('page');
      }else if(id == 1){
        this.classifypage[id].classList.add('page');
        this.classifypage[0].classList.remove('page');
        this.classifypage[2].classList.remove('page');
      }else if(id == 2){
        this.classifypage[id].classList.add('page');
        this.classifypage[0].classList.remove('page');
        this.classifypage[1].classList.remove('page');
      }
    },
    // 详情页跳转
    jumpdatalis(routeInfo){
      this.$toRouter(routeInfo)
    },
<<<<<<< HEAD
    // 防抖节流函数，原理就是判断函数执行间隔时间，如果间隔过小就不执行函数，以此达到防抖的目的
=======
<<<<<<< HEAD
    // 防抖节流函数，原理就是判断函数执行间隔时间，如果间隔过小就不执行函数，以此达到防抖的目的
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    debounce (func,wait,mustRun) {
      var timeout,
          startTime = new Date();

      return function() {
        let context = this,
            args = arguments,
            curTime = new Date();

        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          func.apply(context, args);
          startTime = curTime;
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait);
        }
      }
      },
<<<<<<< HEAD
    // 判断滚动快到底部，触底会发请求下一条数据
=======
<<<<<<< HEAD
    // 判断滚动快到底部，触底会发请求下一条数据
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    rollfun(){
      // 滑动的高度
      let scrollTop = document.documentElement.scrollTop;
      // 当前高度
      let clientHeight = document.documentElement.clientHeight;
      // 页面总高度
      let scrollHeight = document.body.scrollHeight;
      if(scrollTop+clientHeight>=scrollHeight){
        this.sum+=1
        this.getinvitation();
      }
    }
  },
  mounted(){
    this.getinvitation();
    this.lightvar();
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    // 滚动监听事件
    window.addEventListener('scroll',this.debounce(this.rollfun,500,500))
  },
  destroyed() {
    // 此处需要移除全局的监听事件，不然会污染
<<<<<<< HEAD

=======
=======
    window.addEventListener('scroll',this.debounce(this.rollfun,500,500))
  },
  destroyed() {
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    window.removeEventListener("scroll",this.debounce(this.rollfun,500,500))
  }

}
</script>


<style>
*{
  list-style: none;
}
.navtit{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
}
.navtit p{
  font-size: 16px;
  margin: 0 0.1rem;
  color: #666;
  cursor: pointer;
}
.navtit p:hover{
  color: rgb(30, 128, 255);
}
.navtit .page{
  color: rgb(30, 128, 255);
}
#s_publishbox{
  /*max-width: 700px;*/
  /*min-width: 300px;*/
  width: 640px;
  margin: 0 auto;
  padding: 25px;
  background-color: #fff;
}
.s_publishlist li{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 10px;
  cursor: pointer;
  border-bottom: 1px solid gainsboro;
<<<<<<< HEAD
  word-break: break-all;

=======
<<<<<<< HEAD
  word-break: break-all;
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
}
.s_publishlist li:hover{
  background: rgb(250, 250, 250);
}
/* 列表 */
.s_userbox{
  display: flex;
  align-items: center;
}
.s_userbox p{
  font-size: 14px;
  margin: 0.1rem 0.1rem;
}
.s_userbox .s_sendtime{
  color: #777;
}
.s_userbox .s_post{
  color: #777;
}
.headbox{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.userpost{
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.userpost .userid{
  color: #333;
}
.carebox{
  display: flex;
  align-items: center;
}
.carebox .becarenum{
  margin: 0 50px;
}
.carebox .numcare{
  color: #333;
  font-weight: bold;
}
.userinfo .headpic{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 5px gainsboro;
  margin-right: 10px;
}
.headpic img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.s_vertical{
  height: 14px;
  width: 1px;
  background: gainsboro;
}
/* 内容标题和详情链接 */
.word{
  width: 100%;
}
.s_pubtit{
  width: 5rem;
  color: #1d2129;
  line-height: 24px;
  font-size: 16px;
  font-weight: bold;
  margin: 0.1rem 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.s_pubdetails{
  font-size: 13px;
  color: #86909c;
  /*width: 500px;*/
  margin: 0.1rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-orient: vertical;
}
.wordpic{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* 图片 */
.picbox{
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  margin-left: 10px;
}
.picbox img{
  display: block;
  width: 100%;
  height: 100%;
}
/* 列表图标 */
.icon{
  display: flex;
  align-items: center;
  font-size: 16px;
}
.icon_a{
  margin: 0 0.1rem;
}
.icon_a:hover{
  color: rgb(30, 128, 255);
}
.icon_a p{
  font-size: 14px;
  color: #666;
}
.icon_a{
  display: flex;
  align-items: center;
}
.icon_a .iconfont{
  font-size: 16px;
}
</style>